<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/localized_link/localized_link.html">
<link rel="import" href="../../shared/nearby_page_template.html">
<link rel="import" href="../../shared/nearby_shared_icons.html">

<dom-module id="nearby-share-high-visibility-page">
  <template>
    <style>
      #content {
        background: linear-gradient(to top,
            var(--nearby-page-linear-gradient-color-start) 5%, transparent 50%);
        display: flex;
        flex-direction: column-reverse;
        height: 100%;
        position: relative;
        width: 100%;
      }

      #help {
        align-items: flex-start;
        color: var(--cros-text-color-disabled);
        display: flex;
        flex-direction: row;
        font-size: 9px;
        line-height: 12px;
        margin-inline-end: 24px;
        margin-inline-start: 24px;
        padding: 8px;
      }

      #helpText {
        margin: auto 0;
      }

      #infoIcon {
        flex-shrink: 0;
        height: 20px;
        margin-inline-end: 12px;
        width: 20px;
      }

      .icon-help-state {
        fill: var(--cros-icon-color-disabled);
      }

      .icon-error-state {
        fill: var(--cros-icon-color-alert);
      }

      #error {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        font-size: 12px;
      }

      #errorTitle {
        color: var(--cros-text-color-alert);
        font-weight: bold;
        margin-bottom: 3px;
      }

      #errorDescription {
        color: var(--cros-text-color-secondary);
        line-height: 13px;
      }

      cr-lottie {
        bottom: 0;
        height: 100px;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
      }
    </style>
    <nearby-page-template title="$i18n{nearbyShareFeatureName}"
        sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]"
        a11y-announced-sub-title="[[getA11yAnnouncedSubTitle_(deviceName,
                                  remainingTimeInSeconds_)]]"
        cancel-button-label="$i18n{cancel}"
        close-only="[[getErrorTitle_(errorState_)]]">
      <div id="content" slot="content">
        <iron-media-query query="(prefers-color-scheme: dark)"
            query-matches="{{isDarkModeActive_}}">
        </iron-media-query>
        <cr-lottie animation-url="[[getAnimationUrl_(isDarkModeActive_)]]"
          autoplay="true">
        </cr-lottie>
        <div id="help">
          <template is="dom-if" if="[[!getErrorTitle_(errorState_)]]">
            <iron-icon id="infoIcon" icon="nearby20:info"
                class="icon-help-state">
            </iron-icon>
            <div id="helpText">
              <localized-link
                  localized-string="$i18n{nearbyShareHighVisibilityHelpText}"
                  link-url="$i18n{nearbyShareLearnMoreLink}">
              </localized-link>
            </div>
          </template>
          <template is="dom-if" if="[[getErrorTitle_(errorState_)]]">
            <iron-icon id="infoIcon" icon="nearby20:info"
                class="icon-error-state">
            </iron-icon>
            <div id="error" role="alert" aria-labelledby="errorTitle"
                aria-describedby="errorDescription">
              <div id="errorTitle" aria-hidden="true">
                [[getErrorTitle_(errorState_)]]
              </div>
              <div id="errorDescription" aria-hidden="true">
                <localized-link
                    localized-string="[[getErrorDescription_(errorState_)]]"
                    link-url="$i18n{nearbyShareLearnMoreLink}">
                </localized-link>
              </div>
            </div>
          </template>
        </div>
      </div>
    </nearby-page-template>
  </template>
  <script src="nearby_share_high_visibility_page.js"></script>
</dom-module>
